Improve the UI for login #157

jonathanbataire · 2024-04-25T13:16:35Z

Description

This PR is 1/3 of #172 and #168
Fixes #131
Fixes #117

Changes

dropped "tool" in the system name so "CHT User Management"
rename "sign in" to "login"

kennsippell

Nice work Jonathan

kennsippell · 2024-04-25T16:06:47Z

src/public/fonts/NotoSans-Regular.ttf

Can you also move the material-symbols.woff2 file into this fonts folder?

src/liquid/app/view.html

src/liquid/auth/authentication_form.html

kennsippell · 2024-04-25T16:17:35Z

src/liquid/auth/authentication_form.html

-              {% endfor %}
-          </select>
-        </div>
+  <div class="">


You don't like the bulma styling for dropdowns? I kinda like the font and coloring a bit better.

src/liquid/auth/view.html

kennsippell · 2024-04-25T16:19:33Z

src/public/css/styles.css

@@ -0,0 +1,96 @@
+/* app colors */
+/* font sizes */


Is all this scss form somewhere? Did you write it by hand?
Did you attempt to achieve the look you're going for with bulma and need to use all this custom css?
From a maintenance perspective, it's a bit unfortuneate to go from like... 1 line of custom css to all this.

yes this is compiled from ./src/scss/styles.scss should we move this to a dist folder to eliminate confusion?

Yes tried to do this with custom scss i fill like bulma makes the html look bloated
with this we compile only whats required (performance wink wink)
makes it look not clean :)
overall i think html looks cleaner with this approach
do you have strong opinions on bulma? i can try it again there lmk

iwhen it comes to maintainability yes it can get complicated
but be trying to make it understandable and organized

gonna try it in with bulma!

src/liquid/auth/authentication_form.html

kennsippell · 2024-04-26T08:23:21Z

src/liquid/auth/authentication_form.html

-            <input name="password" class="input" type="password" placeholder="password">
-        </div>
+    {% if errors %}
+    <div class="error center">


Can we use hx-disable to disable all inputs and the login button to prevent multiple clicks?

cant seem to get this to work sos

kennsippell · 2024-04-26T08:29:30Z

src/liquid/auth/authentication_form.html

-      </p>
+    {% endif %}
+    <div class = "">
+      <button class=" login-btn">


When I click login, it sometimes takes like 4-5 seconds before I see an error.
When I retry the login, the error remains and there is no indication that anything is happen. I find this state a bit difficult - waiting, with an error visible, with no indication anything is happening.
Can we do something? Maybe hx-disable is enough (feedback above). Maybe we could do something with hx-indicator like in #142?

kennsippell · 2024-04-26T08:31:11Z

src/liquid/auth/authentication_form.html

-        <div class="control">
-            <input name="password" class="input" type="password" placeholder="password">
-        </div>
+    {% if errors %}


I think it'd be great if we actually showed login errors. Even if we have different messaging for credential problems vs "all other problems".

it looks like this is out of scope for this PR as the server response rn is just a catch all

kennsippell · 2024-04-26T08:33:47Z

src/public/css/styles.css

+/* font sizes */
+.theme, html,
+body {
+  background-color: #323232;


Is it confusing to copy the look and feel of CHT? Or is that what we want to do here?

I'm concerned that user managers sometimes have to use the cht and sometimes they have to use this management tool; and if they look too similar this might be confusing for some of them.

Maybe we shouldn't match one prominent thing like the background color? I also think this color is difficult since we have text in the logos. You're using a white font on this background; but the logo for Kenya has black font. We can't use a white font in the logo because it is also used on the other pages which have a white background.

freddieptf · 2024-05-16T16:36:51Z

src/public/css/styles.css

+  font-size: 1em;
+  cursor: pointer;
+  text-decoration: none;
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.5); }


Can we have the login button on the same elevation as the card it's on? Dropping a shadow from the login button makes it look a level higher than the other elements on the card.

freddieptf · 2024-05-16T16:40:20Z

src/liquid/auth/authentication_form.html

+    <span>Login Failed. Please Try Again</span>
+  </div>
+
+  <div id="spinner" class="spinner"></div>


Can we have this spinner show in the login button? I feel like that would be a better indicator of the operation's progress

Take a look at https://v1.htmx.org/attributes/hx-indicator/ and how it's currently used eg in https://github.com/medic/cht-user-management/blob/main/src/liquid/place/bulk_create_form.html

freddieptf · 2024-05-16T16:43:05Z

src/liquid/auth/authentication_form.html

+  <div id="spinner" class="spinner"></div>
+
+  <div>
+    <button class="login-btn" hx-disable>Login</button>


You should add this to the form https://htmx.org/attributes/hx-disabled-elt/

freddieptf · 2024-05-16T16:48:25Z

src/liquid/auth/authentication_form.html

    </div>
  </div>
+
+  <div id="error-msg" class="error center">
+    <span>Login Failed. Please Try Again</span>


Can we show this below the login button?

freddieptf · 2024-05-16T16:58:59Z

src/public/css/styles.css

+  background-color: #F8F8F8;
+  font-family: Noto, sans-serif; }
+
+.btn, .login-btn {


If this is our new button style, can we target all buttons instead of the class btn?

this is a compiled file from the scss

freddieptf · 2024-05-16T17:02:16Z

src/routes/authentication.ts

@@ -35,6 +35,8 @@ export default async function authentication(fastify: FastifyInstance) {
    try {
      chtSession = await ChtSession.create(authInfo, username, password);
    } catch (e: any) {
+      // TODO: fine tune error codes to match response
+      resp.status(400);


Why are we setting the status code to 400 and not 401?

jonathanbataire · 2024-06-07T08:00:12Z

@freddieptf this is ready for review

jonathanbataire · 2024-07-04T09:09:00Z

@freddieptf requesting review here this is ready

jonathanbataire requested a review from kennsippell April 25, 2024 13:16

kennsippell requested changes Apr 26, 2024

View reviewed changes

kennsippell changed the title ~~117 login UI~~ Improve the UI for login Apr 26, 2024

kennsippell reviewed Apr 26, 2024

View reviewed changes

This was referenced May 14, 2024

main UI - directives and table views #168

Open

UI improvements - forms #172

Open

freddieptf requested changes May 16, 2024

View reviewed changes

freddieptf reviewed May 16, 2024

View reviewed changes

kennsippell self-requested a review May 17, 2024 20:17

login page changes

a9de676

jonathanbataire force-pushed the 117-login-ui branch from 967d8b9 to a9de676 Compare June 6, 2024 06:44

jonathanbataire changed the base branch from main to 131-forms-ui June 6, 2024 06:45

jonathanbataire requested a review from freddieptf June 6, 2024 06:46

jonathanbataire added 3 commits June 6, 2024 10:18

Merge branch '131-forms-ui' into 117-login-ui

c7c5ee8

merge form-ui

7f203e0

Merge branch '131-forms-ui' into 117-login-ui

ded2b22

jonathanbataire added 4 commits June 7, 2024 11:55

Merge branch '131-forms-ui' into 117-login-ui

469e03c

Merge branch '131-forms-ui' into 117-login-ui

7804ad3

Merge branch '131-forms-ui' into 117-login-ui

dcee1b9

clean up

f86a932

Merge branch '131-forms-ui' into 117-login-ui

881ec35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve the UI for login #157

Improve the UI for login #157

jonathanbataire commented Apr 25, 2024 •

edited

Loading

kennsippell left a comment

kennsippell Apr 25, 2024

kennsippell Apr 25, 2024

kennsippell Apr 25, 2024

jonathanbataire Apr 26, 2024 •

edited

Loading

jonathanbataire Apr 26, 2024

jonathanbataire Apr 26, 2024

kennsippell Apr 26, 2024

jonathanbataire Apr 29, 2024

kennsippell Apr 26, 2024

kennsippell Apr 26, 2024

jonathanbataire Apr 29, 2024

kennsippell Apr 26, 2024

freddieptf May 16, 2024

freddieptf May 16, 2024

freddieptf May 16, 2024

freddieptf May 16, 2024

freddieptf May 16, 2024

freddieptf May 16, 2024

jonathanbataire Jun 6, 2024 •

edited

Loading

freddieptf May 16, 2024

jonathanbataire commented Jun 7, 2024

jonathanbataire commented Jul 4, 2024

Improve the UI for login #157

Are you sure you want to change the base?

Improve the UI for login #157

Conversation

jonathanbataire commented Apr 25, 2024 • edited Loading

Description

Changes

kennsippell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jonathanbataire Apr 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jonathanbataire Jun 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jonathanbataire commented Jun 7, 2024

jonathanbataire commented Jul 4, 2024

jonathanbataire commented Apr 25, 2024 •

edited

Loading

jonathanbataire Apr 26, 2024 •

edited

Loading

jonathanbataire Jun 6, 2024 •

edited

Loading